<template>
  <div class="admin-layout">
    <!-- 顶部导航 -->
    <div class="header">
      <Home>
        <template #title>广告营销管理系统—系统管理员</template>
      </Home>
    </div>
    
    <!-- 主体内容区 -->
    <div class="content-container">
      <!-- 侧边栏 -->
      <div class="sidebar">
        <AdminSidebar>
          <template #menu>
            <el-menu-item index="/admin/dashboard">
              <el-icon><DataLine /></el-icon>
              <span>数据看板</span>
            </el-menu-item>
            
            <el-menu-item index="/admin/ads">
                <el-icon><Picture /></el-icon>
                <span>广告管理</span>
            </el-menu-item>

            <el-menu-item index="/admin/devices">
              <el-icon><Monitor /></el-icon>
              <span>设备管理</span>
            </el-menu-item>

            <el-menu-item index="/admin/users">
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </el-menu-item>

            <el-menu-item index="/admin/roles">
              <el-icon><Setting /></el-icon>
              <span>角色管理</span>
            </el-menu-item>

            <el-menu-item index="/admin/logs">
              <el-icon><Document /></el-icon>
              <span>操作日志</span>
            </el-menu-item>

            <el-menu-item index="/admin/backup">
              <el-icon><Connection /></el-icon>
              <span>系统监控</span>
            </el-menu-item>

            <el-menu-item index="/admin/notifications">
              <el-icon><Message /></el-icon>
              <span>消息发送</span>
            </el-menu-item>
          </template>
        </AdminSidebar>
      </div>
      
      <!-- 主要内容区 -->
      <div class="main-content">
        <router-view />
      </div>
    </div>
  </div>
</template>

<script setup>
import AdminSidebar from '@/components/AdminSidebar.vue'
import Home from '@/components/AdminHome.vue'
import { 
  DataLine, 
  User, 
  Setting, 
  Picture, 
  Document, 
  Monitor,
  Connection,
  Check,
  List
} from '@element-plus/icons-vue'
</script>

<style scoped>
/* 保持原有样式不变 */
.admin-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f0f2f5;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.content-container {
  display: flex;
  min-height: calc(100vh - 60px);
  margin-top: 60px;
}

.sidebar {
  position: fixed;
  left: 0;
  top: 60px;
  bottom: 0;
  width: 240px;
  transition: all 0.3s;
  z-index: 999;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.1);
}

.sidebar.collapsed {
  width: 64px;
}

.main-content {
  flex: 1;
  margin-left: 240px;
  padding: 24px;
  background-color: #f0f2f5;
  min-height: calc(100vh - 60px);
  transition: all 0.3s;
}

.main-content.collapsed {
  margin-left: 64px;
}

/* 菜单项样式 */
.el-menu-item {
  height: 56px;
  line-height: 56px;
  margin: 8px 16px;
  border-radius: 8px;
  transition: all 0.3s;
}

.el-menu-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.el-menu-item.is-active {
  background: #1890ff !important;
  color: #fff !important;
}

/* 子菜单样式 */
:deep(.el-sub-menu) {
  margin: 8px 16px;
}

:deep(.el-sub-menu__title) {
  border-radius: 8px;
  height: 56px;
  line-height: 56px;
}

:deep(.el-sub-menu__title:hover) {
  background: rgba(255, 255, 255, 0.1) !important;
}

:deep(.el-sub-menu .el-menu-item) {
  margin: 4px 0;
  padding-left: 54px !important;
}

.el-menu-item .el-icon,
:deep(.el-sub-menu__title .el-icon) {
  font-size: 18px;
  margin-right: 10px;
  vertical-align: middle;
}

/* 折叠状态样式 */
.admin-menu.el-menu--collapse {
  width: 100%;
}

.admin-menu.el-menu--collapse .el-menu-item {
  margin: 8px 12px;
}

:deep(.el-menu--collapse) .el-menu-item span,
:deep(.el-menu--collapse) .el-sub-menu__title span {
  display: none;
}
</style>